//////////////////////////////////////////////////////
//                                                  //
//                    ButtaLayer                    //
//                                                  //
//  //////////////////////////////////////////////  //
//  //              Action Header               //  //
//  //////////////////////////////////////////////  //
//                                                  //
//  //////////////////////////////////////////////  //
//  //                                          //  //
//  //                BOARD (content)           //  //
//  //                                          //  //
//  //                                          //  //
//  //////////////////////////////////////////////  //
//                                                  //
//  //////////////////////////////////////////////  //
//  //              Action Footer               //  //
//  //////////////////////////////////////////////  //
//                                                  //
//////////////////////////////////////////////////////
var CloseLayer = function() {
	var old = document.getElementById("bl_plate");
	if(old) old.parentNode.removeChild(old)
};

var ReplaceLayerContent = function(partial_name) {
	BL.render_content(partial_name);
};

var RenderLayer = function(_e, partial_name, options) {
	BL = new ButtaLayer(new Eventor(_e));

	// define root_container
	BL.define_container();

	// append layer
	BL.render_layer();

	// append actions
	BL.render_actions();
	
	// append content
	BL.render_content(partial_name);
	
	// IE6 has weird action...
	// styling
	// BL.position();
	// animating
	// BL.animating();
}

var ButtaLayer = function(eventor) {
	this.eventor = eventor;
	this.__doms = {};

	// remove old
	CloseLayer();

	this.touch_elements();
};

ButtaLayer.prototype.define_container = function() {
	// var _candidate = document.getElementsByTagName("body")[0]
	var _candidate = document.getElementById("body");
	this.container = _candidate;
};

ButtaLayer.prototype.render_layer = function() {
	this.plate.appendChild(this.header);
	this.plate.appendChild(this.body);
	this.plate.appendChild(this.footer);
	this.container.insertBefore(this.plate, this.container.firstChild);
	// this.container.appendChild(this.plate);
};

ButtaLayer.prototype.render_actions = function() {
	this.footer.appendChild(this.__buildActions());
};

ButtaLayer.prototype.render_content = function(partial_name) {
	var content = this.__buildContent(partial_name);
	this.body.innerHTML = content.body;

	this.position();
	this.animating();
	eval(content.script);
};

ButtaLayer.prototype.position = function() {
	MoveToMousePos(this.plate, this.eventor._mouse());
};

ButtaLayer.prototype.animating = function() {
	this.plate.style.visibility = "visible";
};


//
// workers
ButtaLayer.prototype.__buildElement = function(id, options) {
	if(!this.__doms[id]) {
		var _element = document.createElement("div");
		_element.id = this.ids[id] || id;
		if(this.classes[id]) _element.className = this.classes[id];
		_styles = this.styles[id] || options["styles"];
		for(var _key in _styles) {
			try {
				_element.style[_key] = _styles[_key];
			} catch(e) {
				//
			}
		}
		this.__doms[id] = _element;
	}

	return this.__doms[id];
};

ButtaLayer.prototype.__buildContent = function(partial_name) {
	var _res = new zAjax().send({
		url: FULL_URL + "/partials/" + partial_name,
		sync: true,
		method: "GET",
		success: Bind(this, function(xhr) {
			// var response = eval("(" + xhr.responseText + ")");
			// if(response.version) this.manifestVersion = response.version
		}),
		failure: function(xhr) {
			// fail;
		}
	})

	var __script = "";
	var __content = _res.responseText.replace(/[\r\n]+/ig, '');
	var _m = null;
	var _p = /<script[^>]*>(.*)(?:<\/script>)/gi;
	while(_m = _p.exec(__content)) {
		__script += ";" + _m.last();
	};

	return { body: __content, script: __script };
};

ButtaLayer.prototype.__buildActions = function() {
	var __action = this.__buildElement("bl_close_button");
	__action.innerHTML = "Close";

	OnEvent.add(__action, "click", Bind(this, function() {
		this.close();
	}));

	return __action;
};

ButtaLayer.prototype.close = function() {
	this.plate.parentNode.removeChild(this.plate);
};

ButtaLayer.prototype.touch_elements = function() {
	for(var id in this.ids) this[id] = this.__buildElement(id);
};

ButtaLayer.prototype.plateMoveToXY = function(_xy) {
	var wW = (Browser.safari && !document.evaluate) ? document.innerWidth : (Browser.opera) ? document.body.clientWidth : document.documentElement.clientWidth;
	var wH = (Browser.safari && !document.evaluate) ? document.innerHeight : (Browser.opera) ? document.body.clientHeight : document.documentElement.clientHeight;
	if(wW < 1) wW = document.body.clientWidth;
	if(wH < 1) wH = document.body.clientHeigth;

  var _x = _xy._x;
  var _y = _xy._y;

	// BEWARE!
	// MAGIC HERE!
	if(_x > ((wW / 2) + 101)) _x = _x - this.plate.offsetWidth;
	if(_y > 250) _y = _y - this.plate.offsetHeight;

  this.plate.style.top = (_y + 10) + "px";
  this.plate.style.left = (_x + 10) + "px";
};

//
// dirty configures
ButtaLayer.prototype.ids = {
	plate: "bl_plate", //_" + new Date().getTime(),
	header: "bl_header",
	body: "bl_body",
	footer: "bl_footer"
};

ButtaLayer.prototype.classes = {
	plate: "bl_plate",
	header: "bl_header",
	body: "bl_body",
	footer: "bl_footer"
};

ButtaLayer.prototype.styles = {
	plate: {
		position: "absolute",
		border: "1px solid black",
		zIndex: "2",
		visibility: "hidden"
	},
	header: {
	},
	body: {
	},
	footer: {
	},
	bl_close_button: {
		borderTop: "1px solid #687993",
		background: "#9DADC7",
		color: "white",
		textAlign: "center",
		fontVariant: "small-caps",
		fontSize: "15px",
		fontWeight: "bold",
		cursor: "pointer"
	}
};
